{% extends '@AdsPlace/layout.twig' %}
{% block body %}
    <style>
        .viewbox{
       position: fixed; left: 0; bottom: 0; right: 0; width: 100%; background-color: #fff; padding: 30px;  height: 100%;     
        }
        .viewbox .head {
            margin-bottom: 12px;
        }
        .viewbox .head span{ font-size: 13px; color: #999; margin-left: 12px;}
    </style>
    <div  id="VueApp" v-cloak class="viewbox">
        
        <p class="head"><strong>预览</strong> 
            <span>注：此页面中点击和展现将不被记录在报告中</span>
        </p> 
    
        <preview-medias-screen v-bind:medias-id="mediasId"></preview-medias-screen>
    </div>
{% endblock %}

 {% block pagejs %}

    <script src="./plugins/AdsPlace/js/dist/index.js"></script> 
    <script>
  var vue = new Vue({
    el: '#VueApp',
    delimiters: ['${', '}'],
    data: function () {
        return {    
            mediasId : "{{ mediasId }}",
           //mediasId : 53,
        }  
    }
})
  </script>
 {%endblock%}